<template>
	<div id="head">
		<van-nav-bar class="title" title="成为商家" left-text="返回" left-arrow @click-left="onClickLeft" />

	</div>
	<div id="context">
		<van-cell-group inset>
			<div id="headPortrait">
				<el-upload class="avatar-uploader" action="/shop/upload/avatar" :headers="headers" tip="头像"
					:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
					style="display: inline-block;width: 00px">

					<el-avatar :size="200">
						<el-image :src="shop.headPortrait" class="headPicture" style="width: 100%; height: 100%;">
						</el-image>
					</el-avatar>

				</el-upload>
			</div>

			<van-field v-model="shop.shopName" label="店铺名" placeholder="请输入店铺名" />
			<van-field v-model="shop.phone" label="手机号" placeholder="请输入手机号" />
			<van-field v-model="shop.address" label="店铺地址" placeholder="请输入店铺地址" />
			<van-field v-model="shop.state" label="店铺类型" placeholder="请输入店铺类型" />
			<van-field v-model="shop.shopDescribe" label="店铺描述" placeholder="请输入店铺描述" />
		</van-cell-group>
	</div>
	<div id="butten">
		<el-button type="primary" @click="addShop()">申请</el-button>
		<el-button @click-left="onClickLeft">取消</el-button>
	</div>
</template>

<script>
	// import {
	// 	ref
	// } from 'vue';
	import qs from 'qs';
	//通知
	import {
		Notify
	} from 'vant';
	import storage from '@/utils/localstorage.js'
	export default {
		data() {
			return {
				headers: {
					userId: storage.get("userId"),
					token: storage.get("token")
				},
				shop: {
					// shopName: '茶颜悦色（大计店）',
					// phone: '12345678998',
					headPortrait: '',
					// state: '奶茶',
					// address: '湖南省长沙市岳麓区杜鹃路172号',
					// shopDescribe: '茶颜，大计独此一家'

				}
			}
		},
		setup() {
			const onClickLeft = () => history.back();
			return {
				onClickLeft,
			};
		},
		methods: {
			getheadPortrait() {
				this.$axios.get("/shop/getheadPortrait")
					.then(res => {
						this.shop.headPortrait = res.result.headPortrait
						console.log("headPortrait" + res.result.headPortrait)
					})
			},
			//处理头像成功
			handleAvatarSuccess(res, file) {
				console.log("res,file" + "," + file);
				console.log("上传头像");
				//刷新当前页面
				// location.reload();
				this.getheadPortrait()
			},

			//上传头像之前
			beforeAvatarUpload(file) {
				console.log("file=" + file);
			},
			addShop() {
				console.log("申请！")
				this.$axios.post("/shop/addShop", qs.stringify(this.shop))
					.then(res => {
						if (res.result.judge) {
							Notify({
								type: 'success',
								message: '申请成功，请等待后续审核结果！'
							});
						} else {
							Notify({
								type: 'danger',
								message: '申请失败！'
							});
						}
					})
			},
			// uploaderHeadPortrait() {
			// 	// alert(this.shop.headPortrait)
			// 	this.$axios.post("/shop/upload/avatar", {
			// 		params: {
			// 			file: this.shop.headPortrait
			// 		}
			// 	})
			// }
		},
		mounted() {

		}


	}
</script>

<style scoped>
	#context {
		display: flex;
		justify-content: center;
	}

	#headPortrait {
		padding: 25px 0px;
		padding-left: 50px;
	}

	#butten {
		margin-left: 230px;
		margin-top: 200px;
	}

	/* .title {
		background-color: #ffc300;
		height: 70px;
	} */
</style>
